<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.structure.min.css" />
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.theme.min.css" />
    <!--<link rel="stylesheet" href="css/datatables/css/jquery.dataTables.css"/>--> 
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/highcharts.js"></script>
    <script type="text/javascript" src="API/js/modules/exporting.js"></script>
    <!--<script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>--> 
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="API_RH/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    checkMaintenance();
    checkAuthentification();
    
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 32;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //A la construction de la page
    $(document).on('pageinit',function() {
        try {
            // Init commmun
            init_commun();

            // Init page
        }
        catch (er) {
            log(0, "ERROR(init_home):" + er.message);
        }
    });

    //Affichage de la page avant onload
    $(document).on('pageshow',function() {
        try {
            show_commun();
        }
        catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });

    //Fin chargement page
    function OnLoad() {
        try {
            //
        }
        catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    /**
     * AfficherResultat
     */
    function AfficherResultat(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_consomme_ticket').html(strhtml);
            $( "#div_consomme_ticket_csv" ).html( "" );
            var strDateDepart = getStrDateUsFromFr($("#dateDepart").val());
            var strDateFin = getStrDateUsFromFr($("#dateFin").val());
            var tabInput = { dateDebut : strDateDepart, dateFin : strDateFin };
            callBD("phpsql/getConsoTiket.php", "POST", "text", tabInput, "retourResultat");            
        }
        catch (er) {
            log(0, "ERROR(AfficherResultat):" + er.message);
        }
    }
    
    /**
     * getResultatsCsv
     */
    function getResultatsCsv(){
        try {
            var currentTime = new Date();
            currentTime.setDate(currentTime.getDate() - 7);
            var annee = currentTime.getFullYear();
            var mois = pad2(currentTime.getMonth()+1);
            var jour = pad2(currentTime.getDate());
            var strDate = annee+"_"+mois+"_"+jour;

            var strDateDepart = getStrDateUsFromFr($("#dateDepart").val());
            var strDateFin = getStrDateUsFromFr($("#dateFin").val());
            var tabInput = { dateDebut : strDateDepart, dateFin : strDateFin };
            var strParams = buildParamsGetFromJson(tabInput);         
            
            window.location = "phpsql/getConsoTiketCsv.php?ctrl=ok&csv=oui&filename=consomme_ticket_"+strDate+strParams;         
        }
        catch (er) {
            log(0, "ERROR(getResultatsCsv):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * retourResultat
     * 
     * @param {array} p_retour
     */
    function retourResultat(p_retour){
        try {
            var json_retour = JSON.parse(p_retour);
            if(json_retour["strErreur"] == ""){
                var strhtml = "Hello";
                $('#div_consomme_ticket').html(strhtml);
                
                var regroup = new Array();
                regroup = getListValeurPourAttribut(json_retour["data"]["tickets"]["data"],"incident");
                
                var cate = new Array();
                cate = getListValeurPourAttribut(json_retour["data"]["code_user"]["data"],"code_user");
                
                var datas = new Array();
                for (var indice in cate) {
                    var subDatas = { name : cate[indice]};
                    subDatas.data = new Array();
                    
                    var consoTicket = json_retour["data"]["consoTicket"]["data"];
                    for (var indice0 in consoTicket) {
                        var code_user = consoTicket[indice0]["code_user"];
                        var incident = consoTicket[indice0]["incident"];
                        var charge = consoTicket[indice0]["charge"];
                        if(code_user == cate[indice]){
                            subDatas.data[subDatas.data.length] = parseFloat(charge);
                        }
                    }
                    datas[datas.length] = subDatas;
                }
                
                var retour = $('#div_consomme_ticket').highcharts({
                    chart: {
                        type: 'column',
                        marginBottom: 150
                    },
                    legend: {
                        align: 'center',
                        verticalAlign: 'bottom'
                    },
                    title: {
                        text: 'Consommé par ticket'
                    },
                    xAxis: {
                        categories: regroup,
                        labels: {
                            rotation: -45,
                            align: 'right'
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total consommé en 10ème'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                            }
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            var s;
                            s = this.series.name +' : '+ this.y +' J/H';
                            return s;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: 'white',
                                formatter: function() {
                                    var s;
                                    if(this.y != 0){
                                        s = this.y;
                                    }
                                    return s;
                                }
                            }
                        }
                    },
                    series: datas
                });
            } else{
                $('#div_consomme_ticket').html(json_retour["strErreur"]);
            }
        } catch (er) {
            log(0, "ERROR(retourResultat):" + er.message);
            
        }
    }
</script>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->
        
        <!-- navbar -->
        <!-- /navbar -->

        <!-- content -->
        <div data-role="content" id="main_content">
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h3>Le consomm&eacute; par ticket</h3>
                Analyse pour la p&eacute;riode de 
                <a href="javascript:inputMoisEnCoursRH('dateDepart','dateFin');" data-role="button" data-inline="true" data-mini="true" title="Mois en cours">M</a>:
                <input type="text" name="dateDepart" id="dateDepart" data-mini="true" placeholder="DD/MM/YYYY" />
                <input type="text" name="dateFin" id="dateFin" data-mini="true" placeholder="DD/MM/YYYY" />
                <a href="javascript:AfficherResultat();" data-role="button" data-inline="true" data-icon="arrow-r" data-mini="true">Afficher les resultats</a>
                <a href="javascript:getResultatsCsv();" data-role="button" data-inline="true" data-icon="arrow-r" data-mini="true">CSV Export</a>
                <div id="div_consomme_ticket"></div>
            </div>
            <div id="notifcation" style="background-color:#f7931e;position:absolute;bottom:50px;width:97%;text-align:center;vertical-align:middle;line-height:normal;line-height:30px;height:30px;display:none"></div>		
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>